<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      :inline="true"
      label-width="68px"
      class="globalSerchFormStyle"
    >
      <el-row>
        <el-col :span="6">
          <el-form-item label="活动名称" prop="activityName">
            <el-input
              v-model="queryParams.activityName"
              placeholder="请输入活动名称"
              clearable
              size="small"
              style="width: 190px"
            />
          </el-form-item>
        </el-col>
        <!-- <el-col :span="6">
          <el-form-item label="状态" prop="activityStatus">
            <el-select
              v-model="queryParams.activityStatus"
              placeholder="活动状态"
              clearable
              size="small"
              style="width: 190px"
            >
              <el-option label="未开始" value="0" />
              <el-option label="进行中" value="1" />
              <el-option label="已暂停" value="3" />
              <el-option label="已结束" value="2" />
            </el-select>
          </el-form-item>
        </el-col> -->
        <el-col :span="6">
          <el-form-item label="开始时间">
            <el-date-picker
              v-model="datetimerange"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              size="small"
              value-format="yyyy-MM-dd HH:mm:ss"
              style="width: 180px"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-row class="global_el_rowStyle" :gutter="10">
      <el-col :span="1.5">
        <el-button
          @click="handleQuery"
          type="primary"
          size="mini"
          icon="el-icon-search"
        >
          搜索
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="primary" size="mini" @click="handleReset" plain>
          重置
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          plain
          size="mini"
          @click="handleAddOrEdit('add', {})"
          :disabled="$store.state.user.userLevel != '1'"
        >
          新增
        </el-button>
      </el-col>
    </el-row>
    <el-table :data="list" style="width: 100%" v-loading="loading">
      <el-table-column
        prop=""
        label="序号"
        type="index"
        width="50"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="activityName"
        label="活动名称"
        width="300"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="startTime"
        label="开始时间"
        width="200"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="endTime"
        label="结束时间"
        width="200"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="stock"
        label="库存"
        width="100"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="price"
        label="售价"
        width="100"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="originalPrice"
        label="原价"
        width="100"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="maxBuyNum"
        label="最大购买次数"
        width="150"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          {{ scope.row.maxBuyNum === 0 ? "不限制" : scope.row.maxBuyNum }}
        </template>
      </el-table-column>
      <el-table-column
        prop="activityStatus"
        label="状态"
        :formatter="statusFormatter"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column prop="" label="操作" fixed="right" width="200">
        <!--
           activityStatus:状态 ( 0-未开始，1-进行中，2-已结束)
           activityEnable:活动是否启用，(0-未启用，1-启用)

           活动停止：只能启动，编辑，删除
           活动结束： 只能编辑、删除
           活动启动 ： 停止，编辑，删除
         -->
        <template slot-scope="scope">
          <el-button
            type="text"
            v-if="scope.row.activityEnable === 0"
            @click="changeStatus(scope.row)"
            >启动</el-button
          >
          <el-button
            type="text"
            v-if="
              scope.row.activityEnable === 1 && scope.row.activityStatus != 2
            "
            @click="changeStatus(scope.row)"
            >停止</el-button
          >
          <el-button
            type="text"
            @click="handleAddOrEdit('edit', scope.row)"
            v-if="
              scope.row.activityStatus != 1 || scope.row.activityEnable === 0
            "
            :disabled="$store.state.user.userLevel != '1'"
          >
            编辑
          </el-button>
          <el-button type="text" @click="deleteActivity(scope.row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!--添加或编辑 -->
    <AddOrEdit
      :addOrEditDialog.sync="addOrEditDialog"
      :action="action"
      :currentRowData="currentRowData"
      @reloadData="getList"
    ></AddOrEdit>
  </div>
</template>
<script>
import {
  getKillActivityListApi,
  changeKillActivityStatusApi,
  deleteKillActivityApi,
} from "@/api/market/secondKill";
import AddOrEdit from "./addOrEdit";
import { cloneDeep } from "lodash";
export default {
  name: "SecondKill",
  components: {
    AddOrEdit,
  },
  data() {
    return {
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        activityStatus: null,
      },
      total: 0,
      datetimerange: [],
      list: [],
      addOrEditDialog: false,
      action: "add",
      currentRowData: {},
      loading: false,
    };
  },
  created() {
    this.getList();
  },
  methods: {
    // 获取列表数据
    async getList() {
      this.loading = true;
      const params = { ...this.queryParams };
      if (this.datetimerange && this.datetimerange.length) {
        params.activityBeginTime = this.datetimerange[0];
        params.activityEndTime = this.datetimerange[1];
      }
      const res = await getKillActivityListApi(params);
      this.total = res.total;
      this.list = res.rows || [];
      this.loading = false;
    },

    // 查询
    handleQuery() {
      this.getList();
    },
    // 重置
    handleReset() {
      this.resetForm("queryForm");
      this.datetimerange = [];
      this.getList();
    },

    // 状态格式化
    statusFormatter(row) {
      const types = {
        0: "未开始",
        1: "进行中",
        2: "已结束",
      };
      if (row.activityEnable === 0) {
        return "已暂停";
      } else {
        return types[row.activityStatus];
      }
    },
    // 新增或编辑活动
    handleAddOrEdit(type, row) {
      this.action = type;
      this.currentRowData = cloneDeep(row);
      if (type === "add") {
        // 设置最大购买次数默认值
        this.currentRowData.maxBuyNum = "0";
      }
      this.addOrEditDialog = true;
    },

    // 切换活动状态----启动，暂停
    changeStatus(row) {
      let message = row.activityEnable === 1 ? "已暂停" : "已启动";
      let text = row.activityEnable === 1 ? "暂停" : "启动";
      let name = row.activityName;
      this.$confirm(`确定${text}活动名称为“${name}”吗？`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(async () => {
        await changeKillActivityStatusApi(row.id);
        this.msgSuccess(message);
        this.getList();
      });
    },

    // 删除活动
    async deleteActivity(row) {
      let name = row.activityName;
      this.$confirm(`确定删除活动名称为 “${name}” 吗？`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(async () => {
        await deleteKillActivityApi(row.id);
        this.msgSuccess("删除活动成功");
        this.getList();
      });
    },
  },
};
</script>
<style lang="scss" scoped></style>
